import React from 'react'
import PropTypes from 'prop-types'
import {AutoComplete, Col, Form, Input, Modal, Row, Select} from 'antd'

const {Option} = Select
const FormItem = Form.Item

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
}

const modal = ({
                 item = {},
                 onOk,
                 handleSearch,
                 dataSource,
                 list,
                 form: {
                   getFieldDecorator,
                   validateFields,
                   getFieldsValue,
                 },
                 ...modalProps
               }) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      onOk(data)
    })
  }

  const handleSelect = (value, {props}) => {
    getFieldDecorator('managerName', {initialValue: props.children})
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  const renderOption = item => (<Option key={item.id}>{item.name}</Option>)

  const getDepartments = () => {
    let tmpArr = list
    if (item) {
      tmpArr = list.filter(val => val.id !== item.id)
    }
    return tmpArr.map(item => (<Option value={item.id}>{item.name}</Option>))
  }

  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Row gutter={{md: 12, lg: 24, xl: 48}}>
          <Col md={12} sm={24}>
            <FormItem {...formItemLayout} label="部门名称">
              {getFieldDecorator('name', {
                initialValue: item.name,
                rules: [{required: true, message: '请输入部门名称'}],
              })(<Input placeholder="部门名称"/>)}
              {getFieldDecorator('id', {initialValue: item.id})(<input type='hidden'/>)}
            </FormItem>
          </Col>
          <Col md={12} sm={24}>
            <FormItem {...formItemLayout} label="上级部门">
              {getFieldDecorator('parentId', {
                initialValue: item.parent ? item.parent.id : undefined,
              })(<Select placeholder="选择上级部门" style={{width: '100%'}}>
                {getDepartments()}
              </Select>)}
            </FormItem>
          </Col>
          <Col md={12} sm={24}>
            <FormItem {...formItemLayout} label="部门编号">
              {getFieldDecorator('sn', {
                initialValue: item.sn,
              })(<Input placeholder="部门编号"/>)}
            </FormItem>
          </Col>
          <Col md={12} sm={24}>
            <FormItem {...formItemLayout} label="部门负责人">
              {getFieldDecorator('managerId', {initialValue: item.managerId ? item.managerId : undefined})(
                <AutoComplete
                  dataSource={dataSource.map(renderOption)}
                  style={{width: '100%'}}
                  onSearch={handleSearch}
                  onSelect={handleSelect}
                  placeholder="员工编号或名称"
                />,
              )}
              {getFieldDecorator('managerName')(<Input type={'hidden'}/>)}
            </FormItem>
          </Col>
          <Col md={12} sm={24}>
            <FormItem {...formItemLayout} label="联系电话">
              {getFieldDecorator('phoneNum', {initialValue: item.phoneNum})(
                <Input style={{width: '100%'}} placeholder="联系电话"/>,
              )}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
